<template>
  <a-modal
    v-model:visible="visible"
    title-align="start"
    width="800px"
    title="修改密码"
    :mask-closable=false
    :ok-loading=true
    :draggable=true
  >
    <a-form
      ref="formModelRef"
      label-align="left"
      layout="horizontal"
      :model="formModel"
      :rules="rules"
    >
      <a-form-item field="oldPassword" label="旧密码">
        <a-input-password
          v-model="formModel.oldPassword"
          placeholder="请输入旧密码"
          allow-clear
        />
      </a-form-item>
      <a-form-item field="newPassword" label="新密码">
        <a-input-password
          v-model="formModel.newPassword"
          placeholder="请输入新密码"
          allow-clear
        />
      </a-form-item>
      <a-form-item field="confirmPassword" label="确认密码">
        <a-input-password
          v-model="formModel.confirmPassword"
          placeholder="确认密码"
          allow-clear
        />
      </a-form-item>
    </a-form>

    <template #footer>
      <a-row justify="end">
        <a-button-group>
          <a-button :disabled="loading" @click="cancel">
            取消
          </a-button>
          <a-button type="primary" :loading="loading" @click="submit">
            确定
          </a-button>
        </a-button-group>
      </a-row>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, defineExpose, nextTick } from 'vue';
import { UpdatePassword, updatePassword } from '@/api/system/user';
import { Message, ValidatedError } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading';

const visible = ref(false);

const formModelRef = ref();

const formModel = ref<UpdatePassword>({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});

const { loading, setLoading } = useLoading(false);

const rules = {
  oldPassword: [
    { required: true, message: '请输入旧密码' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码' },
    {
      match: new RegExp(/^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*(),.?":{}|<>]).{6,}$/),
      message: '密码至少为6位字符，并且必须同时包含数字、大写字母、小写字母以及除空格外的特殊字符'
    }
  ],
  confirmPassword: [
    { required: true, message: '请输入确认密码' },
    {
      validator: (value, cb) => {
        console.log(value, cb);
        if (value !== formModel.value.newPassword) {
          cb('两次输入密码不相同');
        } else {
          cb();
        }
      }
    }
  ]
};

const submit = () => {
  formModelRef.value.validate((errors: undefined | Record<string, ValidatedError>) => {
    if (errors) {
      return;
    }
    loading.value = true;
    updatePassword(formModel.value).then(() => {
      cancel();
      Message.success('修改成功');
    }).finally(() => {
      loading.value = false;
    });
  });
};

const open = () => {
  visible.value = true;
  nextTick(() => {
    formModelRef.value.resetFields();
  });
};

const cancel = () => {
  visible.value = false;
};

defineExpose({
  open,
  cancel
});
</script>

<script lang="ts">
export default {
  name: 'DialogUpdatePassword'
};
</script>

<style scoped>

</style>